<template>
  <tables
    ref="table"
    customSearchInput
    customSearchButtons
    customTools
    :form-id="formId"
    :modal-width="modalWidth"
    @on-link-click="handleLinkClick"
    :modal-out-height="modalOutHeight"
    :filterMethod="filterMethod"
  >
    <template slot="tool-items">
      <tool-item @on-click="handleRemark" iconType="md-create" name="备注"></tool-item>
      <tool-item @on-click="handleDelete" iconType="md-trash" name="删除"></tool-item>
    </template>
    <template slot="search-input">
      <table-filters :filterData="filterData" v-model="filterValue"></table-filters>
    </template>

    <Modal
      :loading="modalLoading"
      v-model="createVisible"
      :width="createModalWidth"
      @on-ok="onFormSave"
      title="添加备注"
    >
      <Input
        v-model="remark"
        type="textarea"
        :autosize="{minRows: 3,maxRows: 5}"
        placeholder="请输入备注"
      />
    </Modal>

    <Drawer width="640" title="应聘详情" v-model="detailVisible" :style="styles">
      <ul class="info-form-list">
        <li>
          <em>
            <span>&nbsp;</span> 填写时间：
          </em>
          <div class="r">
            <strong>{{detail.created_at_str}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 姓名：
          </em>
          <div class="r">
            <strong>{{detail.username}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 年龄：
          </em>
          <div class="r">
            <strong>{{detail.age}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 性别：
          </em>
          <div class="r">
            <strong>{{detail.gender_str}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 身份证号：
          </em>
          <div class="r">
            <strong>{{detail.idcard_no}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 手机号：
          </em>
          <div class="r">
            <strong>{{detail.mobile}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 紧急联系人电话：
          </em>
          <div class="r">
            <strong>{{detail.urgency_mobile}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 籍贯：
          </em>
          <div class="r">
            <strong>{{detail.native_place}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 学历：
          </em>
          <div class="r">
            <strong>{{detail.education_str}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 毕业情况：
          </em>
          <div class="r">
            <strong>{{detail.is_graduate_str}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 毕业院校：
          </em>
          <div class="r">
            <strong>{{detail.graduate_school}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 上传近照：
          </em>
          <div class="r">
            <image-view :image-list="[detail.personal_url]"/>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 希望上班门店：
          </em>
          <div class="r">
            <strong>{{detail.shop_names}}</strong>
          </div>
        </li>
        <li>
          <em>
            <span>&nbsp;</span> 备注：
          </em>
          <div class="r">
            <strong>{{detail.remark}}</strong>
          </div>
        </li>
      </ul>
    </Drawer>

    <template slot="search-button">
      <Button icon="ios-cloud-download-outline" @click.stop="handleExport">导出</Button>
    </template>
  </tables>
</template>

<script>
import Tables from "_c/tables";
import { dataRemark, getForm, getFormDetail } from "@/api/form";
import { dateFormat } from "@/libs/util";
import TableFilters from "_c/filters";
import customFilter from "_c/tables/mixins/customFilter";

export default {
  mixins: [customFilter],
  components: {
    Tables,
    TableFilters
  },
  data() {
    return {
      detailVisible: false,
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static"
      },
      detail: {},
      formId: 8,
      modalLoading: true,
      createVisible: false,
      createModalWidth: 500,
      remark: "",
      selectRow: {}
    };
  },
  methods: {
    handleExport() {
      const filter = [];
      const { username } = this.filterValue;
      if (username) {
        filter.push("username=" + username);
      }

      window.open(`${this.$baseUrl}/job/export?` + filter.join("&"), "_blank");
    },
    handleLinkClick(params) {
      this.detail = params.row;
      getFormDetail(this.formId, params.row.id)
        .then(result => {
          const detail = result.data.data;
          detail.created_at_str = dateFormat(detail.created_at);
          this.detail = detail;
          // 请求详情后改变数据为已读，需要刷新列表
          this.$refs.table.refreshDate();

          getForm(this.formId).then(result => {
            result.data.data.fields.forEach(field => {
              if (field.field_type === "select") {
                this.detail[field.field_name + "_str"] = field.field_options.find(
                  c => c.value == this.detail[field.field_name]
                ).title;

                this.detailVisible = true;
              }
            });
          });
        })
        .catch(err => {
          console.log(error);
        });
    },
    handleRemark() {
      const table = this.$refs.table;
      const selectRow = table.$refs.tables.getSelection();

      if (selectRow.length === 0 || selectRow.length > 1) {
        this.$Message.error("请选择一行数据");
        return;
      }
      this.createVisible = true;
      this.selectRow = selectRow[0];
    },
    handleDelete() {
      this.$refs.table.handleDelete();
    },
    onFormSave() {
      dataRemark(this.formId, this.selectRow.id, this.remark)
        .then(result => {
          this.$Message.success("备注成功");
          this.remark = "";
          this.refreshDate();
        })
        .catch(err => {
          this.resetModal();
        });
    },
    refreshDate() {
      this.modalLoading = false;
      this.$nextTick(() => {
        this.modalLoading = true;
        this.createVisible = false;
        this.$refs.table.refreshDate();
      });
    },
    resetModal() {
      this.modalLoading = false;
      this.$nextTick(() => {
        this.modalLoading = true;
      });
    }
  }
};
</script>
